<template>
    
  <div class="container">
    <!-- 此为大盒子，旗下盒子依照每块编写 -->
      <div class="content">
          <div class="content-1">插入侧边栏内容区</div>
          <div class="content-2">
               <div class="content-btn">
                   <div class="content-btn-son" :class="{clickClass:btnClass==0}" @click="enentClick(0)">靶场介绍</div>
                   <div class="content-btn-son" :class="{clickClass:btnClass==1}" @click="enentClick(1)">过程分析</div>
                   <div class="content-btn-son" :class="{clickClass:btnClass==2}" @click="enentClick(2)">靶场评论</div>
               </div>
               <div class="content-share">
                   <img src="./../../assets/imgs/椭圆形备份 2(1).png" alt="">
                   <input type="text" placeholder="分享我的看法" style="outline: none;border: 0;">
                   <button>发布</button>
               </div>
               <div class="content-tltle">
                    最新  |  最热
               </div>
             <!-- 评论循环的盒子 -->
               <div class="forToComment">
                <div class="content-comment">
                   <div class="comment-left">
                       <div class="comment-left-1">
                          <img src="./../../assets/imgs/椭圆形备份 2(2).png" alt="">
                       </div>
                       <div class="comment-left-2">
                            <div class="item-1">WN_3481</div>
                            <div class="item-2">还可以，讲非常深刻，学习上手快</div>
                            <div class="item-3">2023-03-20 12:59</div>
                       </div>
                   </div>
                   <div class="comment-right" >
                       <img src="./../../assets/imgs/icon_weidianzhan.png" alt="" v-show="isShow" @click="showClick">
                       <img src="./../../assets/imgs/icon_yidianzhan.png" alt="" v-show="isShow==false" @click="showClick">
                       <span>10</span>
                   </div>
               </div>
               <div class="line"></div>
               </div>
           <!-- 复制的第二个（后面删除） -->
           <div class="forToComment">
                <div class="content-comment">
                   <div class="comment-left">
                       <div class="comment-left-1">
                          <img src="./../../assets/imgs/椭圆形备份 2(2).png" alt="">
                       </div>
                       <div class="comment-left-2">
                            <div class="item-1">WN_3481</div>
                            <div class="item-2">还可以，讲非常深刻，学习上手快</div>
                            <div class="item-3">2023-03-20 12:59</div>
                       </div>
                   </div>
                   <div class="comment-right">
                       <img src="./../../assets/imgs/icon_weidianzhan.png" alt="" v-show="twoShow" @click="showClick1">
                       <img src="./../../assets/imgs/icon_yidianzhan.png" alt="" v-show="twoShow==false" @click="showClick1">
                       <span>10</span>
                   </div>
               </div>
               <div class="line"></div>
               </div>
          </div>
      </div>
  </div>
</template>

<script lang='ts' setup>
import { reactive,ref} from 'vue'
const btnClass=ref<number>(0);
const isShow=ref<boolean>(true);
const twoShow=ref<boolean>(true);
function showClick(){
     isShow.value=!isShow.value;
}
function showClick1(){
    twoShow.value=!twoShow.value
}
function enentClick(n:any){
       btnClass.value=-1;
       btnClass.value=n
}
</script>

<style lang='scss' scoped>
.container{
    padding-left: 1.6rem;
    padding-right: 1.6rem;
    box-sizing: border-box;

    .content{
        display: flex;
        width: 20.75rem;
        margin: 0 auto;
        
       .content-1{
          width: 5.45rem;
          background-color: antiquewhite;
       }
       .content-2{
        flex-grow: 1;
        margin-left: 1.0875rem;
        .content-btn{
            width: 6.1875rem;
            height: 0.9375rem;
            background-color: #f2f5f7;
            padding: 0.08rem;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.5625rem;
            .content-btn-son{
               width: 33%;
               height: 100%;

               line-height: 0.8rem;
               text-align: center;
               font-size: 0.31rem;
               border-radius: 0.12rem;
            }
            .clickClass{
                background-color: blue;
                color: white;
            }
        }
        .content-share{
            height: 0.77rem;
            width: 10.55rem;
            display: flex;
            align-items: center;
            margin-bottom: 0.4375rem;
            img{
                height: 0.6625rem;
                width: 0.6rem;
                margin-left: 0.125rem;
                margin-right: 0.125rem;
            }
            input{
                width: 8.075rem;
                height: 0.7rem;
                background-color: #f2f2f2;
                border-radius: 0.125rem;
            }
            button{
                height: 0.7rem;
                width: 1.3375rem;
                background-color: blue;
                border: 0;
                color: white;
                border-radius: 0.0625rem;
                margin-left: 0.15rem;
                font-size: 0.35rem;
            }
        }
        .content-tltle{
            font-size: 0.25rem;
            margin-left: 0.075rem;
            margin-bottom: 0.5rem;
        }
        .content-comment{
            height: 1.375rem;
            width: 10.55rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.375rem;
            .comment-left{
                height:100%;
                width: 4.775rem;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .comment-left-1{
                    height: 0.6625rem;
                    width: 0.6rem;
                    img{
                        width: 100%;
                        height: 100%;
                        margin-left: 0.125rem;
                    }
                }
                .comment-left-2{
                    width: 3.975rem;
                    height: 100%;
                    font-size: 0.25rem;
                    .item-1{
                        font-weight: bold;
                        margin-top: 0.1875rem;
                        margin-bottom: 0.1875rem;
                    }
                    .item-2{
                        font-size: 0.225rem;
                        margin-bottom: 0.125rem;
                    }
                    .item-3{
                        font-size: 0.1875rem;
                        color: #cdcdcd;
                    }
                }
            }
            .comment-right{
                height: 100%;
                flex-grow: 1;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                img{
                    width: 0.375rem;
                    height: 0.375rem;
                    margin-right: 0.1875rem;
                }
                span{
                    font-size: 0.25rem;
                }
            }
        }
        .line{
            border: 1px solid #e5e5e5;
        }


       }
    }
}
</style>